/**
 * @title 非标类产品分析报告
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
import TabPage from './components/tabPage';
import delPng from '../../../assets/frame/clear.png';
import styles from './index.less';
import _ from 'lodash';
import { NoDataC, NoQueryC } from '../../../comps';

const { TabPane } = Tabs;

@connect(({ loading }) => ({ loading }))
export default class AssetReport extends PureComponent {
  state = {
    tabList: [],
    activeKey: undefined,
  };
  componentDidMount() {
    this.setState(
      {
        tabList: _.cloneDeep(this.props.tabList),
      },
      () => {
        this.setState(
          {
            activeKey: this.state.tabList && this.state.tabList[0] ? this.state.tabList[0].key : undefined,
          },
          () => {
            this.props.type == 'main' ? this[this.state.activeKey]?.getData() : this.myRef?.getData();
          },
        );
      },
    );
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.tabList) != JSON.stringify(this.props.tabList)) {
      this.setState(
        {
          tabList: [..._.cloneDeep(nextProps.tabList)],
        },
        () => {
          this.setState(
            {
              activeKey: this.state.tabList && this.state.tabList[0] ? this.state.tabList[0].key : undefined,
            },
            () => {
              this.props.type == 'main' ? this[this.state.activeKey]?.getData() : this.myRef?.getData();
            },
          );
        },
      );
    }
  }
  // tab页签 选中与否 及全部删除处理
  handleChangeTab = (key) => {
    const { activeKey } = this.state;
    if (key == 'deleteAll') {
      let arr = [...this.state.tabList];
      let tarIndex = arr.findIndex((item) => item.key === activeKey);
      let tempArr = arr.splice(tarIndex, 1);
      // this.setState({
      // 	tabList: tempArr,
      // })
      this.props.changeTabList(tempArr);
      return;
    }
    this.setState(
      {
        activeKey: key,
      },
      () => {
        this[this.state.activeKey]?.getData();
      },
    );
  };
  // tab 点击删除X
  onEdit = (targetKey) => {
    let arr = [...this.state.tabList];
    let tarIndex = arr.findIndex((item) => item.key === targetKey);
    arr.splice(tarIndex, 1);
    this.props.changeTabList(arr);
    // this.setState({
    // 	tabList: arr
    // },() => {

    // 	this.handleChangeTab(arr[0]?.key)
    // })
  };
  render() {
    const { tabList, activeKey } = this.state;
    let itemObj = tabList?.length ? tabList[0] : {};
    return (
      <div className={styles.nonstardReportCont}>
        {tabList && tabList.length && this.props.type == 'main' ? (
          <Tabs hideAdd activeKey={activeKey} onChange={this.handleChangeTab} onEdit={this.onEdit} type='editable-card' style={{ paddingTop: '20px' }}>
            {tabList.map((item) => {
              return (
                <TabPane closable={true} tab={`${item.portfolioCode}-${item.portfolioName}`} key={item.key}>
                  <TabPage tabData={item} onRef={(ref) => (this[item.key] = ref)} />
                </TabPane>
              );
            })}
            <TabPane closable={false} tab={<img src={delPng} />} key={'deleteAll'}></TabPane>
          </Tabs>
        ) : tabList?.length == 1 ? (
          <TabPage tabData={itemObj} onRef={(ref) => (this.myRef = ref)} getReportData={this.props.getReportData} />
        ) : (
          <>{this.props.type == 'main' ? <NoQueryC /> : <NoDataC />}</>
        )}
      </div>
    );
  }
}
